<div class="top">
    <div nz-row>
        <div nz-col nzSpan="4">
            <div class="logo">
            </div>
        </div>
        <div nz-col nzSpan="7">
            <div class="menu">
                <ul>
                    <li *ngFor="let menu of menus;let i= index ">
                        <a  [class.active]="i === selectedIndex" (click)="handleClick(i)">
                            {{ menu.title }}
                        </a>
                    </li>
                </ul>
            </div>
            <div class="submenu">
                <ul>
                    <li *ngFor="let submenu of submenus;let j= index ">
                        <a  [class.active]="j === selectedsubIndex" (click)="handleSubClick(j)">
                            {{ submenu.title }}
                        </a>
                    </li>
                </ul>
            </div>
        </div>
        <div nz-col nzSpan="6" >
            <div nz-row>
                <div ng-col nzSpan="24">
                    <input class="search-input">
                    <!-- <i nz-icon nzType="search" nzTheme="outline"></i> -->
                </div>
            </div>

        </div>
        <div nz-col nzSpan="2" >
            <div class="user-logo">
                <nz-avatar nzIcon="user" [nzSize]="50"></nz-avatar>
            </div>
            <!-- <nz-avatar nzIcon="user"></nz-avatar> -->
        </div>
        <div class="divideline"></div>
    </div>
</div>